<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48' title="教育"></u-navbar>
		<view class="main">
			<view class="banner">
				<view class="title">
					i世界VIP尊享特权
				</view>
				<view class="kait">
					<text>开通VIP，免费畅听所有付费内容</text>
					<u-icon name="arrow-right" color="#F1D2A3" size="24"></u-icon>
				</view>
			</view>
			<view class="content">
				<view class="lable">
					<view class="title">
						品质课程
					</view>
					<view class="more" @click="navTo('./quaCourse/quaCourse?type=1')">
						查看更多<u-icon name="arrow-right" color="#999999" size="26"></u-icon>
					</view>
				</view>
				<!-- 品质课程 -->
				<view class="quality">
					<view class="classBox">
						<view class="info">
							<view class="title">
                {{ p_data.series_name }}
							</view>
							<view class="user">
								<image :src="p_data.owner_avatar" mode=""></image>
								<text>{{ p_data.owner_name }}</text>
							</view>
						</view>
						<view class="more" @click="navTo('./detail/detail?id='+p_data.id)">
							全部<u-icon name="arrow-right" color="#999999" size="26"></u-icon>
						</view>
					</view>
					<view class="cont-ul">
						<view class="cont-li" v-for="(item,index) in p_class_list" :key="index" @click="navTo('./audio/audio?id='+item.id+'&cid='+p_data.id)">
							<image :src="item.class_pic" mode=""></image>
							<view class="text">
                {{ item.class_name }}
							</view>
						</view>
<!--						<view class="cont-li">-->
<!--							<image src="../../../static/imgs/del/del.png" mode=""></image>-->
<!--							<view class="text">-->
<!--								你是谁-灵魂出生 前的人生剧本-->
<!--							</view>-->
<!--						</view>-->
<!--						<view class="cont-li">-->
<!--							<image src="../../../static/imgs/del/del.png" mode=""></image>-->
<!--							<view class="text">-->
<!--								你是谁-灵魂出生 前的人生剧本-->
<!--							</view>-->
<!--						</view>-->
					</view>
				</view>
				<view class="lable">
					<view class="title">
						精选推荐
					</view>
					<view class="more" @click="navTo('./siftCourse/siftCourse?type=2')">
						查看更多<u-icon name="arrow-right" color="#999999" size="26"></u-icon>
					</view>
				</view>
				<view class="sift">
					<view class="sift-text">
						<view class="name">
              {{ j_data.series_name }}
						</view>
						<view class="more" @click="navTo('./detail/detail?id='+j_data.id)">
							全部<u-icon name="arrow-right" color="#999999" size="26"></u-icon>
						</view>
					</view>
					<view class="sift-ul">
						<view class="sift-li" v-for="(item,index) in j_class_list" :key="index" @click="navTo('./audio/audio?id='+item.id+'&cid='+j_data.id)">
							<image :src="item.class_pic" mode=""></image>
							<view class="cont">
								<view class="title">
                  {{ item.class_name }}
								</view>
								<view class="tip">
                  {{ item.summary }}
								</view>
								<view class="type">
                  {{ item.is_free }}
								</view>
							</view>
						</view>
<!--						<view class="sift-li">-->
<!--							<image src="../../../static/imgs/del/del.png" mode=""></image>-->
<!--							<view class="cont">-->
<!--								<view class="title">-->
<!--									父母是孩子成长中不可缺位的导师-->
<!--								</view>-->
<!--								<view class="tip">-->
<!--									父母没有意识到自己是孩子的老师家庭教 育指导再成⻓之路-->
<!--								</view>-->
<!--								<view class="type">-->
<!--                 -->
<!--								</view>-->
<!--							</view>-->
<!--						</view>-->
<!--						<view class="sift-li">-->
<!--							<image src="../../../static/imgs/del/del.png" mode=""></image>-->
<!--							<view class="cont">-->
<!--								<view class="title">-->
<!--									父母是孩子成长中不可缺位的导师-->
<!--								</view>-->
<!--								<view class="tip">-->
<!--									父母没有意识到自己是孩子的老师家庭教 育指导再成⻓之路-->
<!--								</view>-->
<!--								<view class="type">-->
<!--									免费-->
<!--								</view>-->
<!--							</view>-->
<!--						</view>-->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '@/api/educate.js'
	export default {
		data() {
			return {
				page: 1,
        p_data:[],
        p_class_list:[],
        j_data:[],
        j_class_list:[],
			}
		},
		onLoad() {
      this.getEduclass(1)
      this.getEduclass(2)

		},
		methods: {
			// 教育课程列表
			async getEduclass(type) {
				let {
					page
				} = this
				let res = await myRequest.getEducateList({
					page: page,
          num:'1',
          type:type
				})
				if(res.status) {
				  if(type === 1){
            this.p_data = res.data[0]
            this.p_class_list = this.p_data.class.data
            if(this.p_class_list.length > 3){
              for(var i = 0 ;i < 3;i++){
                this.p_class_list.pop()
              }
            }
          }else{
            this.j_data = res.data[0]
            this.j_class_list = this.j_data.class.data
            if(this.j_class_list.length > 3){
              for(var n = 0 ;n < 3;n++){
                this.j_class_list.pop()
              }
            }
          }

				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 0 20rpx;

		.banner {
			width: 100%;
			height: 260rpx;
			border-radius: 16rpx;
			@include bgi('../../../static/imgs/jiaoyubgi.png');

			.title {
				font-size: 40rpx;
				font-family: SourceHanSansCN-Regular;
				color: #FFFFFF;
				padding-top: 46rpx;
				padding-left: 42rpx;
			}

			.kait {
				margin-left: 22rpx;
				margin-top: 20rpx;
				width: fit-content;
				height: 44rpx;
				border: 2rpx solid #FEE3C8;
				border-radius: 22px;
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular;
				color: #F1D2A3;
				text-align: center;
				line-height: 44rpx;
				padding: 0 16rpx;
			}
		}

		.content {

			.lable {
				margin-top: 20rpx;
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333333;
				}

				.more {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.quality {
				width: 710rpx;
				height: auto;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 30rpx 20rpx 20rpx;

				.classBox {
					display: flex;
					justify-content: space-between;

					.info {
						.user {
							display: flex;
							align-items: center;

							image {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
							}
						}
					}

					.more {}
				}

				.cont-ul {
					margin-top: 18rpx;
					display: flex;

					.cont-li {
						width: 216rpx;
						display: flex;
						flex-direction: column;

						&:nth-child(3n-1) {
							margin: 0 12rpx;
						}

						image {
							width: 216rpx;
							height: 216rpx;
						}
					}
				}
			}

			.sift {
				width: 710rpx;
				height: auto;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 26rpx 20rpx 20rpx;

				.sift-text {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.more {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(153, 153, 153, 0.8);
					}
				}

				.sift-ul {
					.sift-li {
						margin-top: 20rpx;
						display: flex;

						image {
							width: 216rpx;
							height: 216rpx;
						}

						.cont {
							margin-left: auto;
							width: 65%;

							.title {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #333333;
							}

							.tip {
								margin-top: 10rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
							}

							.type {
								margin-top: 10rpx;
								width: fit-content;
								height: 36rpx;
								background: #FDE2E2;
								border-radius: 4rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #F93739;
								text-align: center;
								line-height: 36rpx;
								padding: 0 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
